/* eslint-disable eqeqeq */
import IconFont from '@/components/IconFont';
import Limit from '@/components/Limit';
import { Avatar, Popconfirm, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import ReplyChildCard from './ReplyChildCard';
import { difftime } from '@/utils/time';


const ReplyCard = ({
  atUserList,
  token,
  reply,
  id,
  doreply,
  currentUser,
  children,
  createTime,
}) => {
  const intoRef = useRef();

  return (
    <div
      style={{
        overflow: 'hidden',
        display: 'flex',
        transition: 'all 0.2s',
        backgroundColor: doreply?.curitemid ? 'transparent' : doreply?.curid === id ? 'rgba(0, 132, 255, 0.1)' : 'transparent',
        borderRadius: 12,
        cursor: "pointer"
      }}
      ref={intoRef}
    >
      <div style={{ flex: 1 }}>
        <div
          style={{
            padding: '0 0px 0px 0px',
            borderRadius: 8,
          }}
        >
          <Limit content={reply}></Limit>
          {
            atUserList && atUserList?.length > 0 && <div className="spread" style={{ color: '#666', fontSize: 12, paddingTop: 12 }}>
              {/* <span>{difftime(dayjs(), dayjs(createTime))}</span> */}
              <span>
                <b>
                  @
                </b>
                {atUserList?.map?.((it) => (
                  <span key={it?.name} style={{ padding: '0 4px' }}>
                    {it?.name}
                  </span>
                ))}
              </span>
            </div>
          }
        </div>
        {
          children && <div style={{ marginBottom: 20, borderRadius: 8 }}>
            {children?.map((it, i) => {
              return (
                <ReplyChildCard
                  {...it}
                  key={i}
                  currentUser={currentUser}
                  msgId={id}
                  token={token}
                />
              );
            })}
          </div>
        }

      </div>
    </div>
  );
};

export default ReplyCard;
